<template>
    <div>
        <el-form :model="form">
        form:{{form}}
        <el-form-item label="所属角色" label-width="120px" :rules="[
      { required: true}]">
          <el-select v-model="form.roleid" placeholder="请选择菜单地址">
            <el-option
              v-for="item in role_Arr"
              :key="item.id"
              :label="item.rolename"
              :value="item.id"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="用户名" label-width="120px" :rules="[{ required: true}]">
            <el-input v-model="form.username" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="密码" label-width="120px">
            <el-input v-model="form.password" show-password autocomplete="off"></el-input>
        </el-form-item>
      
        <el-form-item label="状态" label-width="120px">
          <el-switch v-model="form.status" :active-value="1" :inactive-value="2"></el-switch>
        </el-form-item>
        <el-form-item label-width="120px">
          <el-button type="primary" @click="commit">{{$route.path == '/user/add'? '添加':'修改'}}</el-button>
        </el-form-item>

      </el-form>
    </div>
</template>

<script>
import { mapGetters, mapActions } from "vuex";
import { requseradd,requseredit,requserinfo } from "../../../http/api";
import {successAlert} from "../../../utils/alert";
export default {
props: [],
computed: {
...mapGetters({
    role_Arr:'role_Arr',
    user_info:'user_info'
})
},
data() {
    return {
        form:{
        roleid: "",
        username: "",
        password: "",
        status: 1
      }
    }
},
activated() {
    if(this.role_Arr){
        this.set_roleArr();
    }
    if(this.$route.path !== "/user/add"){
      // console.log(this.$route);
      requserinfo({ uid:this.$route.params.id }).then((res) => {
            if (res.data.code === 200) {
                this.form = res.data.list;
                this.form.password = "";
            }
        }).catch((err) => {
            console.log(err);
        })
    }
  },
  beforeRouteLeave(to,from,next){
    // console.log(to,from);
    if(from.path !== '/user/add'){
        this.form = {
        roleid: "",
        username: "",
        password: "",
        status: 1
      }
    };
    next()
    },
methods: {
...mapActions({
    set_roleArr:'set_roleArr',
    set_userInfo:'set_userInfo'
}),
commit(){
     if(this.$route.path === '/user/add'){
        
       requseradd(this.form).then(res => {
        if(res.data.code===200){
          //弹成功
          successAlert(res.data.msg);
          this.form = {
            roleid: "",
            username: "",
            password: "",
            status: 1
          };
          //返回菜单管理
          this.$router.push('/user');
        }
      })
     }else{
       this.form.id = this.$route.params.id;
       requseredit(this.form).then(res => {
        if(res.data.code===200){
          //弹成功
          successAlert(res.data.msg);
          // 如果uid为当前用户uid退出登录
          if(this.form.uid === user_info.uid){
            // 清除用户信息
            this.set_userInfo({});
            // 返回登录页
            this.$router.replace('/login');
            return
          }
          //返回菜单管理
          this.$router.push('/user');
        }
      })
     }
   }
}
};
</script>

<style scoped lang="less">

</style>